<template>
	<!-- 猜你喜欢 begin -->
	<view class="products bg-white">
		<view class="product" v-for="(item, index) in props.list" :key="index"  @click="handleSelect(item)">
			<text class="cu-tag light round bg-green">{{ item.keyword }}</text>
			<image class="product-image" :src="item.thumbnail" mode="scaleToFill"></image>

			<view class="info">
				<view class="desc">
					<view class="title ">{{ item.name }}</view>
					<view class="sub">
						<text class="text-red text-size-12">￥</text>
						<text class="text-red text-size-30 margin-right">{{item.price}}</text>
						<text class="text-gray text-del text-size-12">￥{{item.originalPrice}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 猜你喜欢 end -->
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		watch,
		computed,
		ref
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		list: Array
	})
	const handleSelect = (e:any) => {
		emit('action', e)
	}
</script>

<style lang="scss" scoped>
	.products {
		padding: 20rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.product {
			background-color: #ffffff;
			width: 335rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			border-radius: $border-radius-lg;
			margin-bottom: 20rpx;
			box-shadow: 0px 2px 4px 0px rgba(200,200,200,0.5), 0px 2px 4px 0px rgba(200,200,200,0.5);
			border-radius: 8px;

			.cu-tag {
				position: absolute;
				left: 6px;
				top: 8px;
			}

			.product-image {
				width: 100%;
				height: 180px;
				min-height: 180px;
				border-radius: $border-radius-lg $border-radius-lg 0 0;
			}

			.info {
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.desc {
					display: flex;
					flex-direction: column;

					.title {
						font-size: $font-size-lg;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 6rpx;
					}

					.sub {
						font-size: $font-size-sm;
						color: $text-color-assist;
					}
				}

				.extra {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: $color-primary;
						font-size: $font-size-lg;
						font-weight: 500 !important;
					}

					.action {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
	.text-del{
		text-decoration: line-through;
	}
</style>
